<template>
  <section>
    <div style="text-align:center; backgroundColor: #fff;">
      <!-- tabs工具条 -->
      <el-tabs v-model="activeName" type="card">
        <el-tab-pane label="商户资产列表" name="first">
          <el-form
            label-width="100px"
            class="demo-ruleForm"
          >
            <el-row>
              <el-col :span="2">
              <el-form-item>
                <el-button type="primary" class="checkBtn" @click="search()">查询</el-button>
              </el-form-item>
              </el-col>
              <el-col :span="2">
              <el-form-item>
                <el-button type="danger" class="checkBtn" @click="exportToExcel()">导出</el-button>
              </el-form-item>
              </el-col>
            </el-row>
          </el-form>

          <template>
            <el-table :data="tableData" border style="width: 100%">
              <el-table-column type="index" align="center"></el-table-column>
              <el-table-column prop="merchantId" label="商户ID" align="center" width="150"></el-table-column>
              <el-table-column prop="currency" label="币种" align="center" width="120"></el-table-column>
              <el-table-column prop="money" align="center" label="余额" width="120"></el-table-column>
              <el-table-column prop="usableMoney" label="可用资金" align="center" width="120"></el-table-column>
              <el-table-column prop="freezeMoney" label="冻结资金" align="center" width="120"></el-table-column>
              <el-table-column prop="beginMoney" label="期初资金" align="center" width="120"></el-table-column>
              <el-table-column prop="totalBuy" label="总入金" align="center" width="120"></el-table-column>
              <el-table-column prop="totalSail" label="总出金" align="center" width="120"></el-table-column>
              <!-- <el-table-column prop="totalSail" label="管理总入金" align="center" width="120"></el-table-column>
              <el-table-column prop="totalSail" label="管理总出金" align="center" width="120"></el-table-column>
              <el-table-column prop="totalBuy" label="总买入资金" align="center" width="120"></el-table-column>
              <el-table-column prop="totalSail" label="总卖出资金" align="center" width="120"></el-table-column>
              <el-table-column prop="zip" label="商户保证金" align="center" width="120"></el-table-column>
              <el-table-column prop="zip" label="充币" align="center" width="120"></el-table-column>
              <el-table-column prop="zip" label="提币" align="center" width="120"></el-table-column> -->
            </el-table>
            <div class="block">
            <el-pagination
              background
              @size-change="pageSizeChange"
              @current-change="pageIndexChange"
              :current-page="pageIndex"
              :page-size="pageSize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="dataTotal"
            ></el-pagination>
            </div>
          </template>
        </el-tab-pane>
      </el-tabs>
    </div>
    <transition name="el-fade-in-linear">
          <div class="spin-container" v-if="gridLoading">
            <div class="spin1">
              <div class="spin2">
              </div>
                <div class="spin3">
              </div>
            </div>
          </div>
    </transition>
  </section>
</template>
<script>

import DataUtil from "../../common/dataUtil";
import {getMerchantAsset ,getMerchantAssetById } from "@/api/index.js";
export default {
  data() {
    return {
      gridLoading: false,
      activeName: "first",
      pageIndex: this.$store.getters.getOrderListAllIndex,
      pageSize: 10,
      dataTotal: 0,
      labelPosition: "right",
      formLabelAlign: {
        name: "",
        region: ""
      },
      region: [],
      tableData : [],
    };
  },
  methods: {
    pageIndexChange(val) {
				this.pageIndex = val;
				this.$store.dispatch('setOrderListAllIndex', val)
				this.checkList();
    },
    pageSizeChange(val) {
    },
    search() {
      this.pageIndex = 1;
      this.bindGrid();
    },
    bindGrid() {
      let tableData = [];
      const formData = new FormData();
      this.gridLoading = true;
      // formData.delete("merchantId");
      formData.append('merchantId',JSON.parse(DataUtil.userInfo()).id);
      getMerchantAssetById(formData).then(response => {
        if ('01001' == response.status) {
          this.gridLoading = false;
          if(response.data){
            tableData.push(response.data);
            this.tableData = tableData;
            // this.dataTotal = response.data.page.recordCount;
            // formData.delete("merchantId");
          }else {
            this.tableData = [];
            this.dataTotal = 0;
            // formData.delete("merchantId");
          }
        } else {
          // formData.delete("merchantId");
          this.$message.error(response.msg);
        }
      }, response => {
        this.gridLoading = false;
        // formData.delete("merchantId");
      });
    },
    //////导出
    exportToExcel() {
        //excel数据导出
        require.ensure([], () => {
            const {
                export_json_to_excel
            } = require('../../assets/js/Export2Excel');
            const tHeader = ['商户ID','流水号', '业务类型', '币种', '起始资金','变动资金', '余额', '状态','操作类型','操作者','时间','备注'];
            const filterVal = ['merchantId','turnoverNo', 'businessType', 'currency', 'beginMoney','changeMoney', 'money', 
            'status', 'handleType','handleUser','turnoverTime','remarks'];
            const list = this.tableData;
            const data = this.formatJson(filterVal, list);
            export_json_to_excel(tHeader, data, '商户资产列表');
        })
    },
    /////////excel数据格式化
    formatJson(filterVal, jsonData) {
        return jsonData.map(v => filterVal.map(j => v[j]))
    },
  },
  mounted: function() {
      this.bindGrid();
  },
};
</script>
<style>
.blur {
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -10%;
  margin-top: 0;
}
.el-pagination {
  display: inline-block;
  width: 80%;
}
.block {
  padding: 10px 0;
}
.spin-container {
    background: rgba(0,0,0,.1)!important;
}
</style>
